import {Text, View} from "@tarojs/components";
import {useCallback, useEffect, useMemo, useState} from "react";
import {Cell, Empty, Image, Search, TreeSelect} from "@antmjs/vantui";
import Utils from "@/utils/common";

import {MachineModel, ProjectModel} from "@/common/apis/model";
import {machineList2Api, projectMachineListApi} from "@/common/apis/home_datasource";
import {useDidShow, usePullDownRefresh} from "@tarojs/taro";
import ShowUtils from "@/utils/show_utils";
import StyleUtils from "@/utils/style_utils";
import RouthPath from "@/common/RouthPath";
import LocalData from "@/common/local_data";
import CustomNavBar from "@/components/CustomNavBar";
import AssetImage from "@/common/AssetImage";

definePageConfig({
  navigationBarTitleText: '项目',
  enablePullDownRefresh: true,
  enableShareAppMessage: true,
  navigationStyle: 'custom',
  enableShareTimeline: true,
})
export default function Project() {
  const [machine, setMachine] = useState<MachineModel[]>()
  const [active, setActive] = useState(0)


  useEffect(() => {
    setMachine([])
    machineList2Api().then(data => {
      if (data && !Utils.isEmpty(data)) {
        data.forEach(item => {
          item.text = item.name
        })
        setMachine(data)
      }
    })
  }, []);

  const onClickNav = useCallback((e) => {
    setActive(e.detail.index)
  }, []);

  useDidShow(() => {
    LocalData.currentIndex = 1;
  })

  return (
    <View style={{display: 'flex', flexDirection: 'column'}}>
       <CustomNavBar
         title='项目'
         showLeftIcon // 首页通常不显示返回按钮
         leftIconName={AssetImage.logo3}
       >
         <Search
           shape='round'
           background='transparent'
           placeholder='请输入搜索关键词'
           disabled
           onClick={() => {
             Utils.navigateTo({ url: RouthPath.searchProject })
           }}
         />
       </CustomNavBar>
      <View style={{flex: 1}}>
        {
          Utils.isEmpty(machine) ? null : <TreeSelect
            items={machine}
            height='100VH'
            mainActiveIndex={active}
            onClickNav={onClickNav}
            renderContent={<View>
              <ProjectList item={machine![active]}></ProjectList>
            </View>}
          >
          </TreeSelect>
        }
      </View>
    </View>
  )
}


function ProjectList(props) {
  const [items, setItems] = useState<ProjectModel[]>()
  const getList = useCallback((isRefresh) => {
    projectMachineListApi(props.item.id, !isRefresh, isRefresh).then((res) => {
      setItems(res)
    })
  }, [props.item.id]);
  useEffect(() => {
    getList(false)
    return () => {
    }
  }, [getList, props.item.id]);

  usePullDownRefresh(() => {
    getList(true)
  })

  const max3Style = useMemo(() => {
    return StyleUtils.getMaxLines(3)
  }, []);

  return (
    <View style={{padding: '10px', width: '100%', boxSizing: 'border-box', height: '100VH'}}>
      {
        Utils.isEmpty(items) ? <Empty description='暂无项目' /> : items?.map((item) => {
          return <View key={item.id}>
            <Cell renderIcon={<Image src={ShowUtils.getImageUrl(item.image)} style={{width: '50px', height: '50px', marginRight: '10px'}} />}
              renderTitle={<View style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
                    <Text style={{fontSize: '16px', color: 'black'}}>{item.name}</Text>
                    <Text style={{fontSize: '14px', color: 'red'}}>{ShowUtils.getDefaultPrice(item.price)}</Text>
                  </View>}
              renderLabel={<View style={{width: '100%', backgroundColor: 'white'}}>
                    <Text
                      style={max3Style}
                    >{item.note}</Text>
                  </View>}
              onClick={() => {
                    Utils.navigateTo({
                      url: Utils.getUrlWithObject(RouthPath.projectDetail, {
                        machineId: props.item,
                        projectId: item
                      }),
                    })
                  }}
              isLink
            />
          </View>
        })
      }
    </View>
  )
}







